<template>
  <div  v-loading="loading">
    <el-alert
        title="删除成功"
        type="success"
        v-show="isDisabled"
        center
        show-icon>
    </el-alert>
    <el-button
        size="mini"
        class="custom-button"
        style="width: 100px;height: 43px;margin-bottom: 10px;"
        @click="addDishAndMake">新增菜品</el-button>
    <el-select v-model="value" placeholder="请选择菜品类型" style="margin-left: 100px;">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button icon="el-icon-search" @click="reach">搜索</el-button>
    <el-table
        :data="pageTicket"
        style="width: 100%">
      <el-table-column
          prop="userId"
          label="序号"
          type="index"
          width="50px"
      >
      </el-table-column>
      <el-table-column
          prop="dishName"
          label="菜品名称"
      >
      </el-table-column>
      <el-table-column
          prop="dishType"
          label="菜品类型">
      </el-table-column>
      <el-table-column
          label="菜品图片" prop="dishId">
        <template slot-scope="scope">
          <!-- {{ scope.row }} -->
          <img :src="require('../Home/images/'+scope.row.dishUrl)" alt="菜品图片" style="width: 100px; height: 100px;">
        </template>
      </el-table-column>
      <el-table-column
          prop="fat"
          label="脂肪(克)">
      </el-table-column>
      <el-table-column
          prop="carbohydrates"
          label="碳水化合物(克)">
      </el-table-column>
      <el-table-column
          prop="protein"
          label="蛋白质(克)">
      </el-table-column>
      <el-table-column
          prop="heat"
          label="热量(千卡)">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="editDialogEdit(scope.row.id)">编辑
          </el-button>
          <el-button
              size="mini"
              @click="handleDelete(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-row>
      <el-col style="text-align:right">
        <el-pagination
            style="padding-top: 15px"
            @size-change="findSizeChange"
            @current-change="findPage"
            :current-page.sync="pageNow"
            :page-sizes="[2,4,6,8,10]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :disabled="isDisablede"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 编辑 -->
    <el-dialog
        title="编辑菜品"
        :visible.sync="editRule.editDialog"
        width="40%"
        center
    >
      <el-form
          label-width="100px"
      >
        <el-form-item label="菜品名称">
          <el-input v-model="formDate.dishName"></el-input>
        </el-form-item>
        <el-upload
            :http-request="customUpload"
            :file-list="fileList"
            list-type="picture"
            class="upload-demo"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
        </el-upload>
        <el-form-item label="菜品类型">
          <el-select v-model="formDate.dishType" placeholder="请选择菜品类型">
            <el-option label="热菜" value="1"></el-option>
            <el-option label="凉菜" value="2"></el-option>
            <el-option label="汤羹" value="3"></el-option>
            <el-option label="主食" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="脂肪">
          <el-input v-model="formDate.fat"></el-input>
        </el-form-item>
        <el-form-item label="蛋白质">
          <el-input v-model="formDate.protein"></el-input>
        </el-form-item>
        <el-form-item label="碳水化合物">
          <el-input v-model="formDate.carbohydrates"></el-input>
        </el-form-item>
        <el-form-item label="热量">
          <el-input v-model="formDate.heat"></el-input>
        </el-form-item>
        <el-form-item label="菜品描述">
          <el-input type="textarea" v-model="formDate.description" :rows="6"></el-input>
        </el-form-item>
        <el-form-item label="菜品做法">
          <el-input type="textarea" v-model="formDate.makes" autosize></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
    <el-button @click="editRuleCancle">取 消</el-button>
    <el-button type="primary" @click="submitEditRule()"
    >确 定</el-button
    >
  </span>
    </el-dialog>

    <!-- 新增 -->
    <el-dialog
        title="新增菜品"
        :visible.sync="isAlloow.solliaa"
        width="40%"
        center
    >
      <el-form
          label-width="100px"
      >
        <el-form-item label="菜品名称">
          <el-input placeholder="请输入菜品名称" v-model="addDishDate.dishName"></el-input>
        </el-form-item>
        <el-upload
            :http-request="customUpload"
            :file-list="fileList"
            list-type="picture"
            class="upload-demo"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
        </el-upload>
        <el-form-item label="菜品类型">
          <el-select placeholder="请选择菜品类型" v-model="addDishDate.dishType">
            <el-option label="热菜" value="1"></el-option>
            <el-option label="凉菜" value="2"></el-option>
            <el-option label="汤羹" value="3"></el-option>
            <el-option label="主食" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="脂肪">
          <el-input placeholder="请输入菜品所含脂肪" v-model="addDishDate.fat"></el-input>
        </el-form-item>
        <el-form-item label="蛋白质">
          <el-input placeholder="请输入菜品所含蛋白质" v-model="addDishDate.protein"></el-input>
        </el-form-item>
        <el-form-item label="碳水化合物">
          <el-input placeholder="请输入菜品所含碳水化合物" v-model="addDishDate.carbohydrates"></el-input>
        </el-form-item>
        <el-form-item label="热量">
          <el-input placeholder="请输入菜品所含热量" v-model="addDishDate.heat"></el-input>
        </el-form-item>
        <el-form-item label="菜品描述">
          <el-input type="textarea" placeholder="请输入菜品脂肪" :rows="6" v-model="addDishDate.description"></el-input>
        </el-form-item>
        <el-form-item label="菜品做法">
          <el-input type="textarea" v-model="addDishDate.dishMakes[0].makeOne" placeholder="请分步骤输入菜品做法"
                    :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
          <el-input type="textarea" v-model="addDishDate.dishMakes[0].makeTwo"
                    :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
          <el-input type="textarea" v-model="addDishDate.dishMakes[0].makeThree"
                    :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
          <el-input type="textarea" v-model="addDishDate.dishMakes[0].makeFour"
                    :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
          <el-input type="textarea" v-model="addDishDate.dishMakes[0].makeFive"
                    :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
          <el-input type="textarea" v-model="addDishDate.dishMakes[0].makeSix"
                    :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
          <el-input type="textarea" v-model="addDishDate.dishMakes[0].makeSeven"
                    :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
    <el-button @click="editRuleCancle">取 消</el-button>
    <el-button type="primary" @click="submitAddDish"
    >确 定</el-button
    >
  </span>
    </el-dialog>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  data() {
    return {
      //每页显示的条数
      size: 4,
      //总条数
      total: 0,
      //当前页码
      pageNow: 1,
      //分页后的当前页数据
      pageTicket: [],
      //编辑规则
      editRule: {
        editDialog: false, //弹窗
        fileList: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
          {
            name: 'food2.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          }]
      },
      isAlloow: {
        solliaa: false
      },
      formDate: {
        dishName: "",
        dishUrl: "",
        dishType: "",
        fat:  "",
        carbohydrates: "",
        protein: "",
        heat: "",
        description: "",
        makes: ""
      },
      addDishDate: {
        dishName: '',
        dishUrl: '',
        dishType: '',
        fat: '',
        carbohydrates: '',
        protein: '',
        heat: '',
        description: '',
        dishMakes: [{
          makeOne: '',
          makeTwo: '',
          makeThree: '',
          makeFour: '',
          makeFive: '',
          makeSix: '',
          makeSeven: '',
        }]
      },
      isDisabled: false,
      loading : true,
      options: [{
        value: '1',
        label: '热菜'
      }, {
        value: '2',
        label: '凉菜'
      }, {
        value: '3',
        label: '汤羹'
      }, {
        value: '4',
        label: '主食'
      }],
      value: '',
      isDisablede: false
    }
  },
  methods: {
    findAll(page = 1, size =10) {
      request.get("dish/findDishPage", {
            params: {
              pageNow: page,
              pageSize: size
            }
          }
      ).then(response => {
        this.pageTicket = response.data.data.list;
        this.total = response.data.data.total;
        this.loading = false
      }).catch(err => {
        console.log(err)
      })
    },
    //用来处理每页显示记录发生变化的方法
    findSizeChange(size) {
      //将val赋值给size
      this.size = size;
      //重新去后台查询数据
      this.findAll(this.pageNow, this.size)
    },
    //当前页码改变的时候
    findPage() {
      this.findAll(this.pageNow, this.size)
    },
    handleDelete(row) {
      request.delete('dish/deleteDish/' + row)
          .then(res => {
            if(res.data.code == 1) {
              this.findAll(this.pageNow, this.size)
              this.$message({
                message: '删除成功',
                type: "success"
              })
            }
          }).catch(error => {
        console.log(error)
      })
      setTimeout(() => {
        this.isDisabled = false
      }, 1000)

    },
    handleEdit() {

    },
    //获取编辑详情
    editDialogEdit(scope) {
      request.get('dish/findAllById/' + scope)
          .then(res => {
            this.formDate = res.data.data
            this.formDate.makes = this.formDate.makes.replace(/(\d+\.)/g, '\n$1');
            this.editRule.editDialog = true;
          }).catch(error => {
        console.log(error)
      })
    },
    //新增菜品
    addDishAndMake() {
      this.isAlloow.solliaa = true;
    },
    //取消按钮点击方法
    editRuleCancle() {
      this.editRule.editDialog = false;
      this.isAlloow.solliaa = false;
    },
    // 图片上传接口
    customUpload(file) {
      const formData = new FormData();
      formData.append('file', file.file);
      request.post('dish/upload', formData)
          .then(response => {
            this.$message({
              message: "上传成功",
              type: "success"
            })
          })
          .catch(error => {
            console.log(error)
          });
    },
    // 编辑确认按钮点击方法
    submitEditRule() {
      request.put('dish/dishPut', this.formDate[0])
          .then(res => {
            alert("修改成功")
            this.editRule.editDialog = false;
            location.reload();
          }).catch(error => {
        console.log(error)
      })
    },
    submitAddDish() {
      request.post('dish/addDishAndMake', this.addDishDate)
          .then(res => {
            alert("添加成功")
            location.reload();
          }).catch(error => {
        console.log(error)
      })
    },
    // 根据类型查询菜品
    reach() {
      request.get('dish/hotDishes/' + this.value)
          .then(res => {
            if (res.data.code == 1) {
              this.pageTicket = res.data.data
              this.value = ''
              this.isDisablede = true
            }
          })
          .catch(err => {
            console.log(err)
          })
    },
  },
  mounted() {
    this.findAll(this.pageNow, this.size)
  },
}

</script>

<style scoped>
.container {
  width: 1160px;
  margin: 0 auto;
}

.upload-demo {
  margin-left: 30px;
  margin-bottom: 30px;
}

.custom-button {
  margin-top: 10px;
}
</style>
